<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h1>数字:{{num | dou | fix }}</h1>
    <h1>{{myname | rstr }}</h1>
    <h1>{{ mydate| mdate}}</h1>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 全局过滤器 用来 处理数据渲染的 内容
    // 管道 | 写法
    // Vue.filters(过滤器名称,(val)=>{})全局过滤器
    Vue.filter("dou",(val)=>{
      // val--代表 处理的数据
      return val*5
    })
    Vue.filter("fix",(val)=>{
      return val.toFixed(2)
    })


    new Vue({
      el:"#app",
      data(){
        return {
          num:2.234345,
          myname:"麦克阿瑟",
          mydate:"2024-01-01"
        }
      },
      methods: {
        
      },
      computed:{},
      watch:{},
      filters:{ //局部过滤器
        rstr(val){ //rstr 局部过滤器的名称
          // val 过滤的数据
          return val.split('').reverse().join('')
        },
        mdate(val){ // 
          return new Date(val).getTime()
        }
      }
    })
  </script>
</body>
</html>